﻿<div class="sample_title">Datagrid Action Button</div>


sample:<br />
<div class="sample_preview">
    <script type="text/javascript"><!--//--><![CDATA[//><!--
        $(document).ready(function() {
            // Create Datagrid
            $('#datagrid4').grid(
            {
                title: 'User',
                url: gs_path + '/ITUser/GetData',
                colModel: [{ name: 'user_id', label: 'User ID' },
	                       { name: 'user_name', label: 'User Name', width: 200 },
                           { name: 'description', label: 'Deskripsi' },
                           { name: 'email', label: 'Email', width: 160 },
                           { name: 'last_login', label: 'Login Terakhir', type: 'date', align: 'center' },
                           { name: 'status', hide: true },
                           { name: 'status_name', label: 'Status', align: 'center', width: 60}],
                sortname: 'user_id',
                sortorder: 'asc',
                searchitems:
		        [   { name: 'user_id', label: 'User ID' },
	                { name: 'user_name', label: 'User Name', isdefault: true }
		        ],
                actionWidth: 55,
                actionButton:
                [{ label: "Ubah", icon: "edit.png", action: function(data) { console.log(data); alert('Edit : \n' + JSON.stringify(data)); } },
                 { label: "Hapus", icon: "delete.png", action: function(data) { console.log(data); alert('Delete : \n' + JSON.stringify(data)); } }]
            });
            $('#datagrid4 .pSearch').trigger('click');
        });
        //--><!]]></script>
    <div id="datagrid4"></div>
</div><br />
code:
<div class="sample_code" rel="brush: js; html-script: false;">
    &lt;script type="text/javascript"&gt
        $(document).ready(function() {
            // Create Datagrid
            $('#datagrid').grid(
            {
                title: 'User',
                url: gs_path + '/ITUser/GetData',
                colModel: [{ name: 'user_id', label: 'User ID' },
	                       { name: 'user_name', label: 'User Name', width: 200 },
                           { name: 'description', label: 'Deskripsi' },
                           { name: 'email', label: 'Email', width: 160 },
                           { name: 'last_login', label: 'Login Terakhir', type: 'date', align: 'center' },
                           { name: 'status', hide: true },
                           { name: 'status_name', label: 'Status', align: 'center', width: 60}],
                sortname: 'user_id',
                sortorder: 'asc',
                searchitems:
		        [   { name: 'user_id', label: 'User ID' },
	                { name: 'user_name', label: 'User Name', isdefault: true }
		        ],
                actionWidth: 55,
                actionButton:
                [   { label: "Ubah", icon: "edit.png", action: function(data) { console.log(data); alert('Edit : \n'+JSON.stringify(data)); } },
                    { label: "Hapus", icon: "delete.png", action: function(data) { console.log(data); alert('Delete : \n' + JSON.stringify(data)); } }]
            });
        });
    &lt;/script&gt;
        
    &lt;div id="datagrid"&gt;&lt;/div&gt;
    <% for (int i = 0, max_i = 22; i < max_i; i++) { Response.Write("<br />"); } %>
</div>

<br />
<fieldset>
    <legend>actionButton Configuration</legend>
    <table class="tb_apiconfig">
    <tr>
        <td class="label">label <font color="red"><sup>*</sup></font></td>
        <td><font color="blue">(string) default: ''</font><br />
            Title/Label of Action Button
        </td>
    </tr>
    <tr>
        <td class="label">icon</td>
        <td><font color="blue">(string) default: null</font><br />
            Set icon of button
        </td>
    </tr>
    <tr>
        <td class="label">action(data) <font color="red"><sup>*</sup></font></td>
        <td><font color="blue">(function) default: function(){}</font><br />
            Will be executed after action button clicked
        </td>
    </tr>
    <tr>
        <td class="label">visible(data)</td>
        <td><font color="blue">(function) default: true</font><br />
            Function must be return boolean in order to define visibility of button
        </td>
    </tr>
    </table>
</fieldset>